<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能视频播放器测试页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .header p {
            font-size: 1.2em;
            opacity: 0.9;
        }

        .main-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            padding: 30px;
        }

        .video-section {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
        }

        .video-container {
            position: relative;
            background: #000;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 20px;
        }

        #testVideo {
            width: 100%;
            height: 300px;
            object-fit: contain;
        }

        .video-overlay {
            position: absolute;
            top: 10px;
            left: 10px;
            right: 10px;
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 10px;
            border-radius: 5px;
            display: none;
        }

        .video-controls {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .control-section {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            height: fit-content;
        }

        .section-title {
            font-size: 1.3em;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 2px solid #4facfe;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: #555;
        }

        .form-group input, .form-group select {
            width: 100%;
            padding: 10px;
            border: 2px solid #e1e5e9;
            border-radius: 5px;
            font-size: 14px;
            transition: border-color 0.3s ease;
        }

        .form-group input:focus, .form-group select:focus {
            outline: none;
            border-color: #4facfe;
        }

        .btn {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s ease;
            margin: 5px;
            box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(79, 172, 254, 0.4);
        }

        .btn-secondary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }

        .btn-warning {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            box-shadow: 0 4px 15px rgba(245, 87, 108, 0.3);
        }

        .btn-success {
            background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
            box-shadow: 0 4px 15px rgba(78, 205, 196, 0.3);
        }

        .results-section {
            grid-column: 1 / -1;
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin-top: 20px;
        }

        .result-item {
            background: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 10px;
            border-left: 4px solid #4facfe;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .result-item h4 {
            color: #333;
            margin-bottom: 8px;
        }

        .result-item pre {
            background: #f1f3f4;
            padding: 10px;
            border-radius: 5px;
            overflow-x: auto;
            font-size: 12px;
            max-height: 200px;
            overflow-y: auto;
        }

        .instruction-item {
            background: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 10px;
            border-left: 4px solid;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .instruction-item:hover {
            transform: translateX(5px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .instruction-item.pause { border-left-color: #f5576c; }
        .instruction-item.slow-motion { border-left-color: #4ecdc4; }
        .instruction-item.highlight { border-left-color: #f093fb; }
        .instruction-item.explanation { border-left-color: #667eea; }
        .instruction-item.warning { border-left-color: #ff9500; }

        .instruction-type {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: bold;
            color: white;
            margin-right: 10px;
        }

        .type-pause { background: #f5576c; }
        .type-slow-motion { background: #4ecdc4; }
        .type-highlight { background: #f093fb; }
        .type-explanation { background: #667eea; }
        .type-warning { background: #ff9500; }

        .timeline-progress {
            width: 100%;
            height: 20px;
            background: #e1e5e9;
            border-radius: 10px;
            position: relative;
            margin: 15px 0;
            overflow: hidden;
        }

        .timeline-bar {
            height: 100%;
            background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
            border-radius: 10px;
            transition: width 0.3s ease;
        }

        .timeline-markers {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .timeline-marker {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 2px;
            background: rgba(255,255,255,0.8);
            cursor: pointer;
        }

        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #4facfe;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-right: 10px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .status-indicator {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;
        }

        .status-success { background: #4ecdc4; }
        .status-error { background: #f5576c; }
        .status-warning { background: #ff9500; }
        .status-info { background: #4facfe; }

        @media (max-width: 768px) {
            .main-content {
                grid-template-columns: 1fr;
                gap: 20px;
                padding: 20px;
            }
            
            .header h1 {
                font-size: 2em;
            }
            
            .video-controls {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🎬 智能视频播放器测试</h1>
            <p>基于统一API的智能播放控制功能测试</p>
            <p style="font-size: 0.9em; margin-top: 10px; opacity: 0.8;">
                🌐 API服务地址: <strong>http://localhost:8085</strong> | 
                🚀 统一接口: <strong>/smart-player/unified/{resultId}</strong>
            </p>
        </div>

        <div class="main-content">
            <!-- 视频播放区域 -->
            <div class="video-section">
                <div class="section-title">📹 视频播放器</div>
                <div class="video-container">
                    <video id="testVideo" controls>
                        <source src="http://localhost:8085/video/play/result_4d58c942-104a-4f60-bdd7-4ae8b682d9ab.mp4" type="video/mp4">
                        您的浏览器不支持视频播放
                    </video>
                    <div id="videoOverlay" class="video-overlay">
                        <h4 id="overlayTitle"></h4>
                        <p id="overlayDescription"></p>
                    </div>
                </div>
                
                <!-- 播放进度和时间轴 -->
                <div class="timeline-progress">
                    <div id="timelineBar" class="timeline-bar" style="width: 0%"></div>
                    <div id="timelineMarkers" class="timeline-markers"></div>
                </div>
                
                <div class="video-controls">
                    <button class="btn" onclick="toggleAutoMode()">
                        <span id="autoModeText">开启智能模式</span>
                    </button>
                    <button class="btn btn-secondary" onclick="jumpToNextInstruction()">下一个指令</button>
                    <button class="btn btn-warning" onclick="resetPlayer()">重置播放器</button>
                </div>
                
                <div style="margin-top: 15px;">
                    <strong>当前状态:</strong>
                    <span id="playerStatus" class="status-indicator status-info"></span>
                    <span id="statusText">就绪</span>
                </div>
            </div>

            <!-- 控制面板 -->
            <div class="control-section">
                <div class="section-title">⚙️ 测试控制面板</div>
                
                <div class="form-group">
                    <label for="resultId">分析结果ID:</label>
                    <input type="text" id="resultId" value="result_4d58c942-104a-4f60-bdd7-4ae8b682d9ab">
                </div>
                
                <div class="form-group">
                    <label for="userId">用户ID:</label>
                    <input type="number" id="userId" value="3">
                </div>
                
                <div class="form-group">
                    <label for="sportType">运动类型:</label>
                    <select id="sportType">
                        <option value="general">通用运动</option>
                        <option value="running">跑步</option>
                        <option value="basketball">篮球</option>
                    </select>
                </div>

                <div style="margin-top: 20px;">
                    <h4>🚀 统一接口测试 (推荐)</h4>
                    <button class="btn" onclick="testUnifiedAPI('all')" style="background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);">
                        🎯 获取全部数据
                    </button>
                    <button class="btn btn-secondary" onclick="testUnifiedAPI('instructions,timeline')">指令+时间轴</button>
                    <button class="btn btn-secondary" onclick="testUnifiedAPI('analysisPoints,highlights')">分析点+高亮</button>
                </div>
                
                <div style="margin-top: 20px;">
                    <h4>🔧 其他功能测试</h4>
                    <button class="btn btn-success" onclick="testAddBookmark()">添加书签</button>
                    <button class="btn btn-secondary" onclick="testSetCustomSpeed()">设置播放速度</button>
                    <button class="btn btn-warning" onclick="testGetNextInstruction()">获取下一指令</button>
                </div>

                <div style="margin-top: 20px;">
                    <h4>🎮 播放控制测试</h4>
                    <button class="btn btn-warning" onclick="simulateInstruction('PAUSE')">模拟暂停</button>
                    <button class="btn btn-warning" onclick="simulateInstruction('SLOW_MOTION')">模拟慢放</button>
                    <button class="btn btn-warning" onclick="simulateInstruction('HIGHLIGHT')">模拟高亮</button>
                    <button class="btn btn-warning" onclick="simulateInstruction('EXPLANATION')">模拟讲解</button>
                </div>
            </div>
        </div>

        <!-- 结果显示区域 -->
        <div class="results-section">
            <div class="section-title">📊 测试结果</div>
            <div id="results"></div>
        </div>

        <!-- 指令列表显示区域 -->
        <div class="results-section">
            <div class="section-title">📋 智能播放指令列表</div>
            <div id="instructionsList"></div>
        </div>
    </div>

    <script>
        // 全局变量
        let autoMode = false;
        let currentInstructions = [];
        let currentInstructionIndex = 0;
        let video = document.getElementById('testVideo');
        let timelineUpdateInterval;
        
        // API基础URL配置
        const API_BASE_URL = 'http://localhost:8085';

        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            setupVideoEventListeners();
            updateStatus('就绪', 'info');
            
            // 自动加载测试数据 - 使用统一接口
            setTimeout(() => {
                testUnifiedAPI('all');
            }, 1000);
        });

        // 设置视频事件监听器
        function setupVideoEventListeners() {
            video.addEventListener('timeupdate', handleTimeUpdate);
            video.addEventListener('play', () => updateStatus('播放中', 'success'));
            video.addEventListener('pause', () => updateStatus('已暂停', 'warning'));
            video.addEventListener('ended', () => updateStatus('播放结束', 'info'));
            video.addEventListener('loadstart', () => updateStatus('加载中...', 'info'));
        }

        // 处理时间更新
        function handleTimeUpdate() {
            const currentTime = video.currentTime;
            const duration = video.duration || 1;
            const progress = (currentTime / duration) * 100;
            
            document.getElementById('timelineBar').style.width = progress + '%';
            
            if (autoMode) {
                checkForInstructions(currentTime);
            }
        }

        // 检查是否需要执行指令
        function checkForInstructions(currentTime) {
            const instruction = currentInstructions.find(inst => 
                Math.abs(inst.timestamp - currentTime) < 0.5 && 
                inst.autoExecute && 
                !inst.executed
            );
            
            if (instruction) {
                executeInstruction(instruction);
                instruction.executed = true;
            }
        }

        // 执行播放指令
        function executeInstruction(instruction) {
            console.log('执行指令:', instruction);
            
            switch(instruction.type) {
                case 'PAUSE':
                    video.pause();
                    showOverlay(instruction.title, instruction.description);
                    updateStatus('智能暂停: ' + instruction.title, 'warning');
                    break;
                    
                case 'SLOW_MOTION':
                    video.playbackRate = instruction.playbackSpeed || 0.5;
                    showOverlay('慢动作播放', instruction.description);
                    updateStatus('慢动作播放', 'info');
                    
                    setTimeout(() => {
                        video.playbackRate = 1.0;
                        hideOverlay();
                        updateStatus('恢复正常播放', 'success');
                    }, (instruction.duration || 3) * 1000);
                    break;
                    
                case 'HIGHLIGHT':
                    showOverlay('重点片段', instruction.description);
                    updateStatus('高亮显示: ' + instruction.title, 'success');
                    setTimeout(hideOverlay, 3000);
                    break;
                    
                case 'EXPLANATION':
                    showOverlay(instruction.title, instruction.description);
                    updateStatus('讲解模式', 'info');
                    setTimeout(hideOverlay, 5000);
                    break;
                    
                case 'WARNING':
                    showOverlay('⚠️ ' + instruction.title, instruction.description);
                    updateStatus('警告提示', 'error');
                    setTimeout(hideOverlay, 4000);
                    break;
            }
        }

        // 显示视频覆盖层
        function showOverlay(title, description) {
            document.getElementById('overlayTitle').textContent = title;
            document.getElementById('overlayDescription').textContent = description;
            document.getElementById('videoOverlay').style.display = 'block';
        }

        // 隐藏视频覆盖层
        function hideOverlay() {
            document.getElementById('videoOverlay').style.display = 'none';
        }

        // 更新状态显示
        function updateStatus(text, type) {
            document.getElementById('statusText').textContent = text;
            const indicator = document.getElementById('playerStatus');
            indicator.className = 'status-indicator status-' + type;
        }

        // 切换自动模式
        function toggleAutoMode() {
            autoMode = !autoMode;
            const button = document.getElementById('autoModeText');
            
            if (autoMode) {
                button.textContent = '关闭智能模式';
                updateStatus('智能模式已开启', 'success');
            } else {
                button.textContent = '开启智能模式';
                updateStatus('智能模式已关闭', 'info');
            }
        }

        // 跳转到下一个指令
        function jumpToNextInstruction() {
            if (currentInstructions.length === 0) {
                updateStatus('没有可用的指令', 'warning');
                return;
            }
            
            const currentTime = video.currentTime;
            const nextInstruction = currentInstructions.find(inst => inst.timestamp > currentTime);
            
            if (nextInstruction) {
                video.currentTime = nextInstruction.timestamp;
                updateStatus('跳转到: ' + nextInstruction.title, 'info');
            } else {
                updateStatus('没有更多指令', 'warning');
            }
        }

        // 重置播放器
        function resetPlayer() {
            video.currentTime = 0;
            video.playbackRate = 1.0;
            hideOverlay();
            currentInstructions.forEach(inst => inst.executed = false);
            updateStatus('播放器已重置', 'info');
        }

        // 统一API测试函数
        async function testUnifiedAPI(includeTypes = 'all') {
            const resultId = document.getElementById('resultId').value;
            const userId = document.getElementById('userId').value;
            const sportType = document.getElementById('sportType').value;
            
            showLoading(`获取统一数据中... (${includeTypes})`);
            
            try {
                const url = `${API_BASE_URL}/smart-player/unified/${resultId}?userId=${userId}&sportType=${sportType}&includeTypes=${includeTypes}&includeDetails=true&language=zh_CN`;
                const response = await fetch(url);
                const data = await response.json();
                
                if (data.code === 200) {
                    const unifiedData = data.data;
                    
                    // 更新播放指令
                    if (unifiedData.instructions) {
                        currentInstructions = unifiedData.instructions;
                        displayInstructions(currentInstructions);
                        createTimelineMarkers(currentInstructions);
                    }
                    
                    // 显示统一结果
                    displayUnifiedResult('统一API调用结果', unifiedData);
                    
                    // 更新状态
                    const summary = unifiedData.summary || {};
                    let statusText = `统一API调用成功 - 指令:${summary.totalInstructions || 0}, 分析点:${summary.totalAnalysisPoints || 0}`;
                    if (summary.hasErrors) {
                        statusText += ` (${summary.errorCount}个错误)`;
                        updateStatus(statusText, 'warning');
                    } else {
                        updateStatus(statusText, 'success');
                    }
                } else {
                    displayResult('统一API调用失败', data);
                    updateStatus('统一API调用失败', 'error');
                }
            } catch (error) {
                displayResult('统一API调用错误', { error: error.message });
                updateStatus('网络错误', 'error');
            }
        }

        // 其他功能测试函数

        async function testAddBookmark() {
            const resultId = document.getElementById('resultId').value;
            const userId = document.getElementById('userId').value;
            const currentTime = video.currentTime;
            
            showLoading('添加书签中...');
            
            try {
                const response = await fetch(`${API_BASE_URL}/smart-player/bookmark/${resultId}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `timestamp=${currentTime}&title=测试书签&description=在${currentTime.toFixed(1)}秒添加的书签&userId=${userId}`
                });
                const data = await response.json();
                displayResult('添加播放书签', data);
                updateStatus('书签添加成功', 'success');
            } catch (error) {
                displayResult('添加书签错误', { error: error.message });
                updateStatus('添加书签失败', 'error');
            }
        }

        async function testSetCustomSpeed() {
            const resultId = document.getElementById('resultId').value;
            const userId = document.getElementById('userId').value;
            const currentTime = video.currentTime;
            
            showLoading('设置自定义播放速度中...');
            
            try {
                const response = await fetch(`${API_BASE_URL}/smart-player/custom-speed/${resultId}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `startTime=${currentTime}&endTime=${currentTime + 5}&speed=0.5&userId=${userId}`
                });
                const data = await response.json();
                displayResult('设置自定义播放速度', data);
                updateStatus('播放速度设置成功', 'success');
            } catch (error) {
                displayResult('设置播放速度错误', { error: error.message });
                updateStatus('设置播放速度失败', 'error');
            }
        }

        async function testGetNextInstruction() {
            const resultId = document.getElementById('resultId').value;
            const userId = document.getElementById('userId').value;
            const currentTime = video.currentTime;
            
            showLoading('获取下一个播放指令中...');
            
            try {
                const response = await fetch(`${API_BASE_URL}/smart-player/instruction/${resultId}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `currentTime=${currentTime}&userId=${userId}`
                });
                const data = await response.json();
                displayResult('获取下一个播放指令', data);
                
                if (data.code === 200 && data.data) {
                    updateStatus(`下一个指令: ${data.data.title} (${data.data.timestamp}s)`, 'info');
                } else {
                    updateStatus('没有更多指令', 'warning');
                }
            } catch (error) {
                displayResult('获取下一指令错误', { error: error.message });
                updateStatus('获取下一指令失败', 'error');
            }
        }

        // 模拟指令执行
        function simulateInstruction(type) {
            const mockInstruction = {
                id: 'mock_' + Date.now(),
                type: type,
                timestamp: video.currentTime,
                title: getInstructionTitle(type),
                description: getInstructionDescription(type),
                autoExecute: true,
                playbackSpeed: type === 'SLOW_MOTION' ? 0.5 : 1.0,
                duration: 3
            };
            
            executeInstruction(mockInstruction);
        }

        function getInstructionTitle(type) {
            const titles = {
                'PAUSE': '模拟暂停指令',
                'SLOW_MOTION': '模拟慢动作',
                'HIGHLIGHT': '模拟高亮片段',
                'EXPLANATION': '模拟动作讲解',
                'WARNING': '模拟警告提示'
            };
            return titles[type] || '未知指令';
        }

        function getInstructionDescription(type) {
            const descriptions = {
                'PAUSE': '这是一个模拟的暂停指令，用于测试暂停功能',
                'SLOW_MOTION': '这是一个模拟的慢动作指令，播放速度将降至0.5倍',
                'HIGHLIGHT': '这是一个模拟的高亮指令，用于突出显示重要片段',
                'EXPLANATION': '这是一个模拟的讲解指令，提供动作分析和建议',
                'WARNING': '这是一个模拟的警告指令，提醒注意动作问题'
            };
            return descriptions[type] || '模拟指令测试';
        }

        // 显示加载状态
        function showLoading(message) {
            const results = document.getElementById('results');
            results.innerHTML = `<div class="result-item">
                <div class="loading"></div>${message}
            </div>`;
        }

        // 显示结果
        function displayResult(title, data) {
            const results = document.getElementById('results');
            const resultDiv = document.createElement('div');
            resultDiv.className = 'result-item';
            resultDiv.innerHTML = `
                <h4>${title}</h4>
                <pre>${JSON.stringify(data, null, 2)}</pre>
            `;
            results.insertBefore(resultDiv, results.firstChild);
        }

        // 显示统一API结果
        function displayUnifiedResult(title, unifiedData) {
            const results = document.getElementById('results');
            const resultDiv = document.createElement('div');
            resultDiv.className = 'result-item';
            
            let html = `<h4>${title}</h4>`;
            
            // 基本信息
            html += `<div style="margin-bottom: 15px;">
                <strong>📊 基本信息:</strong><br>
                <span style="margin-left: 10px;">结果ID: ${unifiedData.resultId}</span><br>
                <span style="margin-left: 10px;">用户ID: ${unifiedData.userId}</span><br>
                <span style="margin-left: 10px;">运动类型: ${unifiedData.sportType}</span><br>
                <span style="margin-left: 10px;">状态: <span class="status-indicator status-${unifiedData.status === 'SUCCESS' ? 'success' : 'warning'}"></span>${unifiedData.status}</span><br>
                <span style="margin-left: 10px;">消息: ${unifiedData.message}</span>
            </div>`;
            
            // 统计信息
            html += `<div style="margin-bottom: 15px;">
                <strong>📈 数据统计:</strong><br>
                <span style="margin-left: 10px;">播放指令: ${unifiedData.instructionCount || 0} 个</span><br>
                <span style="margin-left: 10px;">分析点: ${unifiedData.analysisPointCount || 0} 个</span><br>
                <span style="margin-left: 10px;">高亮片段: ${unifiedData.highlightCount || 0} 个</span><br>
                <span style="margin-left: 10px;">讲解内容: ${unifiedData.explanationCount || 0} 个</span><br>
                <span style="margin-left: 10px;">书签: ${unifiedData.bookmarkCount || 0} 个</span>
            </div>`;
            
            // 错误信息
            if (unifiedData.errors && Object.keys(unifiedData.errors).length > 0) {
                html += `<div style="margin-bottom: 15px;">
                    <strong>⚠️ 错误信息:</strong><br>`;
                for (const [key, message] of Object.entries(unifiedData.errors)) {
                    html += `<span style="margin-left: 10px; color: #f5576c;">${key}: ${message}</span><br>`;
                }
                html += `</div>`;
            }
            
            // 详细数据
            html += `<details style="margin-top: 10px;">
                <summary style="cursor: pointer; font-weight: bold;">📋 查看详细数据</summary>
                <pre style="margin-top: 10px;">${JSON.stringify(unifiedData, null, 2)}</pre>
            </details>`;
            
            resultDiv.innerHTML = html;
            results.insertBefore(resultDiv, results.firstChild);
        }

        // 显示指令列表
        function displayInstructions(instructions) {
            const instructionsList = document.getElementById('instructionsList');
            
            if (!instructions || instructions.length === 0) {
                instructionsList.innerHTML = '<div class="result-item">暂无播放指令</div>';
                return;
            }
            
            instructionsList.innerHTML = '';
            
            instructions.forEach((instruction, index) => {
                const instructionDiv = document.createElement('div');
                instructionDiv.className = `instruction-item ${instruction.type.toLowerCase().replace('_', '-')}`;
                instructionDiv.onclick = () => {
                    video.currentTime = instruction.timestamp;
                    executeInstruction(instruction);
                };
                
                instructionDiv.innerHTML = `
                    <div>
                        <span class="instruction-type type-${instruction.type.toLowerCase().replace('_', '-')}">${instruction.type}</span>
                        <strong>${instruction.title}</strong>
                        <span style="float: right; color: #666;">${instruction.timestamp.toFixed(1)}s</span>
                    </div>
                    <div style="margin-top: 8px; color: #666; font-size: 14px;">
                        ${instruction.description}
                    </div>
                    ${instruction.relatedBodyPart ? `<div style="margin-top: 5px; font-size: 12px; color: #888;">相关部位: ${instruction.relatedBodyPart}</div>` : ''}
                `;
                
                instructionsList.appendChild(instructionDiv);
            });
        }

        // 创建时间轴标记
        function createTimelineMarkers(instructions) {
            const markersContainer = document.getElementById('timelineMarkers');
            markersContainer.innerHTML = '';
            
            if (!instructions || instructions.length === 0) return;
            
            const videoDuration = video.duration || 30; // 默认30秒
            
            instructions.forEach(instruction => {
                const marker = document.createElement('div');
                marker.className = 'timeline-marker';
                marker.style.left = (instruction.timestamp / videoDuration * 100) + '%';
                marker.title = `${instruction.timestamp.toFixed(1)}s - ${instruction.title}`;
                marker.onclick = () => {
                    video.currentTime = instruction.timestamp;
                };
                
                markersContainer.appendChild(marker);
            });
        }
    </script>
</body>
</html> 